<template>
  <div class="container" v-if="showFlag">
    <div class="loginForm">
      <div style="font-size:20px;font-weight:600;letter-spacing: 2px;text-align: center;">{{$t('用户认证')}}</div>
      <el-form label-width="" :model="ruleForm" ref="ruleForm" :rules="loginRules" class="loginFormItem">
        <el-form-item label="" prop="name">
          <el-input v-emoji v-model="ruleForm.name" size="medium" :placeholder="$t('用户名')"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-emoji type="password" size="medium" :placeholder="$t('密码')" v-model="ruleForm.password" @keyup.enter.native="submitForm(ruleForm)"></el-input>
        </el-form-item>
        <el-form-item label="" prop="key" v-if="oemName === 'anheng'">
          <el-input v-emoji v-model.trim="ruleForm.key" :placeholder="$t('请输入验证码')" size="medium" style="width: 150px;" @keyup.enter.native="submitForm(ruleForm)" />
          <el-image :src="codeImage" alt="" style="width: 110px; height: 36px;cursor: pointer;position: absolute; right: 0;top: 2px;" fit="fill" v-loading.lock="codeLoading" @click="codeImageChange" />
        </el-form-item>
        <el-button type="primary" class="loginButton loginAuthButton" :loading="loading" size="small" @click.native.prevent="submitForm(ruleForm)">{{$t('登录')}}</el-button>
        <div style="text-align: right;">
          <el-link :underline="false" style="color: #008fcc;font-size: 12px;" @click="$router.push('/login')">{{$t('用户登录')}}<i class="el-icon-arrow-right el-icon--right"></i> </el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { getOem } from '@/utils/auth' // 从cookie获取令牌
import { loginOem } from '@/api/login'
import { getImageCode } from '@/api/menu'
export default {
  name: 'Login',
  data () {
    const validateName = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入用户名')))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入密码')))
      } else if (value.length < 6) {
        callback(new Error(this.$t('密码长度不能少于6位')))
      } else {
        callback()
      }
    }
    const validateCode = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请填写验证码')))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        name: '',
        password: '',
        key: '',
        key_id: ''
      },
      oemName: '',
      codeImage: '',
      codeLoading: false,
      loading: false,
      loginRules: {
        name: [{ required: false, trigger: 'blur', validator: validateName }],
        password: [{ required: false, trigger: 'blur', validator: validatePassword }],
        key: [{ required: false, trigger: 'blur', validator: validateCode }]
      },
      showFlag: false
    }
  },
  mounted () {
    this.$store.dispatch('user/authLoginShow').then(res => {
      this.showFlag = true
      loginOem().then(res => {
        this.oemName = res.info
        this.codeImageChange()
      })
    }).catch(e => {
      this.showFlag = false
    })
  },
  methods: {
    submitForm (ruleForm) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/loginAuth', ruleForm).then(res => {
            if (res.status === 0) {
              this.$store.dispatch('user/saveInfoAuth', res.info[0]).then(() => {
                this.$nextTick(() => {
                  this.loading = false
                  this.$router.push('/authMenu')
                })
              })
              // this.$router.push('/network/physical/interface')
            } else {
              this.loading = false
            }
          }).catch(e => {
            this.codeImageChange()
            this.loading = false
          })
        } else {
          console.log('error submit!!')
        }
      })
    },
    codeImageChange () {
      if (this.oemName === 'anheng') {
        this.codeLoading = true
        getImageCode().then(res => {
          this.codeImage = res.info.image_str
          this.ruleForm.key_id = res.info.key_id
          this.codeLoading = false
        })
      }
    }
  }
}
</script>

<style scoped>
.container {
  /* width: 40%; */
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../../assets/img/userAuth.jpg") no-repeat fixed;
  background-size: cover;
  /* padding: 1px; */
  box-sizing: border-box;
  z-index: 1;
  /* overflow: hidden; */
  /* background-color: rgb(255, 255, 255, 0.5); */
}

.loginForm {
  position: absolute;
  width: 350px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* width: 400px; */
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  padding: 20px 40px 30px;
  /* border: 2px solid rgba(255, 255, 255, 0.6); */
  /* background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px); */
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
}
.loginFormItem {
  margin-top: 20px;
  width: 100%;
}
.loginLogo {
  position: absolute;
  width: 200px;
  z-index: 1001;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.1); */
  left: 15%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* background-color: rgba(255, 255, 255, 1); */
  background-image: linear-gradient(145deg, #ccccff, #99ccff);
}
.textLogin {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 20%;
  width: 300px;
  z-index: 1001;
}
.loginButton {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 4px;
  border: none;
  background-image: linear-gradient(to right, #003970, #008fcc),
    linear-gradient(to right, #003970, #008fcc);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  z-index: 10;
}
</style>
<style>
.loginAuthButton::before {
  width: 240px;
  height: 30.5px;
  margin-left: 1px;
  margin-top: 1px;
}
</style>
